<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 14:32:41
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 15:34:19
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3==11-watchEffect.vue==={{ count }}
    <button @click="btn">watchEffect</button>
  </div>
</template>
<script>
import { watchEffect, ref } from 'vue'
export default {
  name: '',
  setup () {
    let count = ref(1)
    let count2 = ref(2)
    let timeId = ref(null)
    const btn = () => {
      count2.value += 2
    }


    /* 初次会立即执行 */
    /* 
    computed:{
      total:(){
        return cart.reduce(()=>{},0)
      }
    }
    */
    watchEffect(() => {
      //  hooks
      /* 特征：初次进入会触发+监听器里面的值发生改变后也会触发，从里往外 */
      // 清除定时器
      clearTimeout(timeId.value)
      // 监听count  类似computed  副作用  //感冒药=》睡觉
      // let c = count.value
      let c2 = count2.value
      timeId.value = setTimeout(() => {
        // console.log('watchEffect');
      }, 3000)

    })
    return { count, btn }
  }
}
</script>
<style lang='less'  scoped>
</style>